<template>
<view class="page">
	<view class="body"> 
		<view class="category-wrap">
			<view class="mod-grid m-b2" v-for="(item,index) in list" :key="index">
				<view class="label">{{item.name}}</view>
				<view class="list">
					<navigator :url="'/pages/community-list/community-list?id='+subitem.id" hover-class="none" class="item" v-for="(subitem,subindex) in item.children" :key="subindex">
						<view class="icon"><image :src="web_host+'/static/icons/'+subitem.id+'.png'" mode="widthFix"></image></view>	
						<view class="info">
							<view class="name">{{subitem.name}}</view>
							<text>关注人数{{subitem.hits}} | 问答总数{{subitem.topics}}</text>
						</view>						
					</navigator>	 	
				</view>	
			</view>	 
		</view>			
	</view>	
	
	<view class="footer">
		<navigator url="/pages/send/send" hover-class="none" class="fix-wrap">
			<view class="btn">
				<view class="f-s32">我要提问</view>
				<view class="f-s26">海量专家免费为您解答</view>
			</view>	
		</navigator>
	</view>	
	
</view>
</template>

<script>  
import {HTTP_REQUEST_URL} from '../../config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			},
			type:'0',    
			page:1,
			total:0,
			list:[] ,
			web_host:HTTP_REQUEST_URL
		}
	},
	async onShow() {
		
	},
	async onLoad(params) { 
		this.getaskstat();  
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++;
				this.getaskstat();  
			} 
		}	 
	},
	methods:{
		 
		getaskstat:async function(){			
			let res=await this.$api.user_api.askstat(); 
			if(res.data.code==0){
				this.list=this.list.concat(res.data.data); 
			}
		} 
		
	},
	computed:{
		list_update(){  
			return this.$store.state.wenda
		}
	},
	watch:{
		list_update(newer,older){ 
			if(newer!=older){ 
				this.list=[];
				this.getaskstat(); 
			}
		}
	},
	components:{ 
	}
}
</script>

<style scoped lang="less">
	.category-wrap{
		padding: 20rpx 0;
		width: 96%;
		margin: 0 auto;
	}
	.mod-grid{
		padding: 30rpx 30rpx 0 30rpx;
		background: #fff;
		border-radius: 10rpx;
		.label{
			font-size: 32rpx;
		}
		.list{
			.item{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;
				.icon{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
					image{
						width: 60rpx;
						height: 60rpx;
					}
				}
				.info{
					.name{
						font-size: 30rpx;
						font-weight: bold;
					}
					text{
						font-size: 28rpx;
						color: #999;
					}
				}
				
			}
			
		}
	}
	.list-wrap{ 
		display: flex;
		flex-wrap: wrap;
		padding:20rpx 1% 10rpx;
		.item{ 
			width: 48%;
			margin:0 1% 20rpx;  
			background:#fff;
			border-radius: 15rpx;
			overflow: hidden;
			.pic{
				width: 100%;
				image{
					width: 100%;
				}
			}
			.title{
				padding:0 10rpx;
				margin:20rpx 0;
				font-size: 28rpx;
			}
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 10rpx;
				margin-bottom: 10rpx;
				.price{ 
					i{
						font-size: 24rpx;
						font-style: initial;
					}
					font-size: 32rpx;
					color:#f00;
				}
				.sell-num{
					font-size:24rpx;
					color:#999;					 
				}
			}
		}
	}
	.footer{
		height: 150rpx;
		.fix-wrap{
			height: 150rpx;
			background: none;
			border: 0 none;
		}
		.btn{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 96%;
			height: 90rpx;
			margin: 20rpx auto;
			background: #00aa7f;
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
		}
	}
	
</style>
